<template>
    <div class="flex flex-col h-screen ">
        <div class="bg-white shrink-0">
            <div class="relative py-3 text-base text-center text-gray-700">
                <Back class=" top-1/2 -translate-y-1/2 absolute !bg-transparent" />
                <span>分类</span>
            </div>
        </div>
        <div class="flex overflow-hidden text-sm grow">
            <div class="w-24 overflow-y-auto leading-10 text-center text-gray-500 bg-gray-100 shrink-0">
                <template v-for="(item, index) in categorys">
                    <div class="relative px-4 border-l-2 border-transparent"
                        :class="{ ' after:absolute after:w-4 after:-top-4  after:right-0 after:shadow-[0.5rem_0.5rem_0_0.1rem_white] after:rounded-full after:h-4 before:absolute before: before:w-4 before:-bottom-4 before:red before:right-0 before:shadow-[10px_-10px_0_4px_white] before:rounded-full before:h-4 border-red-500 text-red-500  bg-white w-full': index == activeCategory }"
                        @click="activeCategory = index">
                        {{ item.name }}
                    </div>
                </template>
            </div>
            <div class="flex flex-col px-4 overflow-hidden grow">
                <div class="w-full py-4 space-x-2 overflow-x-auto text-xs text-gray-600 shrink-0 whitespace-nowrap"
                    ref="cateSubRef">
                    <template v-for="(category, index) in categorys[activeCategory].children">
                        <div class="inline-block px-3 py-1 rounded-full "
                            :class="{ 'text-red-500 bg-red-100 border border-red-400 ': index == activeSubCategory, 'bg-gray-100': index != activeSubCategory }"
                            @click="scrollToCategory(index)" ref="cateSubItemRefs" v-if="category.children.length > 0">
                            {{ category.name }}</div>
                    </template>
                </div>
                <div class="space-y-4 overflow-y-auto grow " ref="cateRef">
                    <div class="h-16 rounded-lg">
                        <LazyImage :src="categorys[activeCategory].ad" mode="contain" />
                    </div>

                    <template v-for="(category, index) in categorys[activeCategory].children">
                        <div v-if="category.children.length" class="p-3 pt-0 bg-white rounded-lg" ref="itemRefs">
                            <div class="sticky top-0 z-10 py-3 text-base bg-white">
                                {{ category.name }}
                            </div>
                            <div
                                class="grid justify-around grid-cols-3 mt-2 text-xs text-center text-gray-500 gap-x-2 gap-y-4 ">
                                <RouterLink :to="{
                                    name: 'shop-category-goods',
                                    params: {
                                        id: index
                                    }
                                }" v-for="(item, index) in category.children">
                                    <div class="w-12 h-12 mx-auto rounded-lg">
                                        <LazyImage :src="item.src" />
                                    </div>
                                    <div class="mt-2">{{ item.name }}</div>
                                </RouterLink>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import c1 from '~/assets/shop/categorys/1.png'
import c2 from '~/assets/shop/categorys/2.png'
import c3 from '~/assets/shop/categorys/3.png'
import c4 from '~/assets/shop/categorys/4.png'
import ad from '~/assets/ad/ad2.png'
import { useDebounceFn, useEventListener } from '@vueuse/core'
const categorys = ['主食', '零食', '保健', '护理', '日用', '服饰', '医疗', '玩具', '美容', '周边'].map(name => {
    return {
        //@ts-ignore
        children: new Array(parseInt(Math.random() * 8)).fill(0).map((item, i1) => ({
            name: name + i1,
            //@ts-ignore
            children: new Array(parseInt(Math.random() * 8)).fill(0).map((item, i2) => ({
                name: name + i1 + i2,
                src: Math.random() > 0.9 ? c1 : Math.random() > 0.8 ? c2 : Math.random() > 0.7 ? c3 : c4,
                children: [],
            })),
        })),
        ad: ad,
        name,
    };
}).filter(item => item.children.length > 0)
const cateRef = ref<HTMLElement>();
const cateSubRef = ref<HTMLElement>();
const activeCategory = ref(1)
const activeSubCategory = ref(0);
const itemRefs = ref<HTMLElement[]>();
const cateSubItemRefs = ref<HTMLElement[]>();
var lock = false;
const unlock = useDebounceFn(() => {
    lock = false;
}, 1000, { maxWait: 1000 })
const scrollToCategory = (index: number) => {
    activeSubCategory.value = index
    const target = itemRefs.value?.[index];
    if (!target) {
        return;
    }

    lock = true;
    unlock()
    cateRef.value?.scrollTo({ top: target.offsetTop - cateRef.value.offsetTop, behavior: 'smooth' })

}
watch(activeCategory, () => {
    cateRef.value?.scrollTo({ top: 0 })
})

onMounted(() => {
    const scrollDebounce = useDebounceFn((e) => {
        if (lock) {
            return;
        }
        const target = e.target as HTMLElement
        for (let index in itemRefs.value!) {
            const el = itemRefs.value![index]
            if ((target.scrollTop - el.offsetTop - target.offsetTop) < 0) {
                activeSubCategory.value = index as unknown as number;
                break;
            }
        }
    }, 100, { maxWait: 100 })
    useEventListener(cateRef.value, 'scroll', scrollDebounce)
})
</script>
    
<style></style>